
<template>
  <div>
        <Card>
            <Form :model="formItem" :label-width="70">
                <Row :gutter="10" type="flex"  align="middle"  >
                <Col span="8">
                    <FormItem label="单号">
                        <Input v-model="formItem.orderNumber" placeholder="单号/发起人手机号" clearable></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="所属客户" v-if="user_type!='01'">
                        <Select v-model="formItem.customerUuid" filterable @on-change="searchCustomerChange">
                            <Option  v-for="item in customerList" :value="item.uuid" :key="item.uuid">{{ item.name }}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="所在机构">
                        <Input v-if="user_type!='01'" @on-focus="s_tree=true;" :disabled="formItem.customerUuid.length<=0||formItem.customerUuid=='全部'" v-model="formItem.instName" placeholder="请选择机构" readonly></Input>
                        <Input v-else @on-focus="s_tree=true;"  v-model="formItem.instName" placeholder="请选择机构" readonly></Input>
                        <!-- <Select v-if="user_type!='01'" :disabled="formItem.customerUuid=='全部'||formItem.customerUuid.length<=0" v-model="formItem.inst_uuid" filterable>
                            <Option  v-for="item in moreMechanismList" :value="item.uuid" :key="item.uuid">{{ item.name }}</Option>
                        </Select>
                        <Select v-else v-model="formItem.inst_uuid" filterable>
                            <Option  v-for="item in moreMechanismList" :value="item.uuid" :key="item.uuid">{{ item.name }}</Option>
                        </Select> -->
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="进度">
                        <Select v-model="formItem.state" filterable>
                            <Option  v-for="item in progressList" :value="item.state" :key="item.state">{{ item.desc }}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="12"  >
                    <FormItem label="所在地">
                        <Cascader change-on-select v-model="search.location" placeholder="请选择省市区" :data="areasData" ></Cascader>
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem label="发起时间">
                        <DatePicker v-model="search.timeRange" format="yyyy-MM-dd HH:mm" type="datetimerange" placement="bottom-end" placeholder="请选择开始和结束时间"></DatePicker>
                    </FormItem>
                </Col>
                </Row>
            
                <Row :gutter="10" >
                <Col span="8" offset="16"  style="text-align:right;">
                    <Button @click="searchGetTable" class="zh-hollow" type="primary" icon="ios-search-strong">搜索</Button>
                    <!-- <Button v-if="btnp.sjtj_bgypin_dc" class="zh-hollow" type="warning" style="margin-left:25px;">导出EXCEL</Button> -->
                    <a style="margin-left:25px;" v-if="btnp.sjtj_bgypin_dc" :href="downLoadUrl" target="_blank"><Button  class="zh-hollow" type="warning"  > 导出EXCEL </Button></a>
                </Col>
                
                </Row>
            </Form>
        </Card>
        <Card style="margin-top:10px;" :padding="0">
            <Table :loading="loading" border :columns="columns" :data="data"></Table>
            <Page :current.sync="formItem.pageNumber"  :total="total" show-total show-sizer @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
        </Card>
        <Modal title="详情" v-model="modal_detail" class="no_footer_modal">
            <div class="zh-flex zh-flex-3 zh-flex-wrap" style="padding:15px 30px;" >
                <div v-for="(item,index) in detail" :key="index" class="zh-flex zh-flex-3" style="width:45%;padding:6px 0" >
                    <label>{{item.label}}：</label>
                    <span>{{item.value}}</span>
                </div>
            </div>
        </Modal>
        <Modal title="选择机构" v-model="s_tree" @on-ok="confirmST" :mask-closable="false" >
            <div style="padding:15px 30px;">
                <Tree :data="s_tree_data"   @on-select-change="s_selectChange"></Tree>
            </div>
        </Modal>
  </div>
</template>

<script>
import {url_offypDc} from '@/libs/downLoadUrl'
import accounting from 'accounting'
import util from '@/libs/util.js'
import {getBankOrg,getDataOffTable,getGoodsCondition,getOrgTree} from '@/libs/get.js'
export default {
    name:'',   
    data () {
        return {
            s_select_op:[],
			s_tree_data:[],
			s_tree:false,
            downLoadUrl:url_offypDc,
            user_type:'',
            userUuid:'',
            btnp:{},
            btn:{
                sjtj_bgypin_xq:false,
                sjtj_bgypin_dc:false
            },
            modal_detail:false,
            detail:[],
            loading:true,
            total:0,
            search:{
                timeRange:[],
                location:[]
            },
            formItem:{
                orderNumber:'',
                customerUuid:'全部',
                inst_uuid:'全部',
                instName:'',
                state:'全部',
                pageNumber:1,
                pageSize:10
            
            },
            customerList:[],
            moreMechanismList:[],
            mechanismList:[],
            progressList:[],
            areasData:this.$store.state.user.areaData ,
            columns:[
                {
                    key:'code',
                    title:'单号',
                    fixed:'left',
                    minWidth:150
                },
                {
                    key:'area',
                    title:'所在地',
                    minWidth:170
                },
                {
                    key:'customerName',
                    title:'客户',
                    minWidth:120
                },
                {
                    key:'instName',
                    title:'机构',
                    minWidth:120
                },
                {
                    key:'name',
                    title:'名称',
                    minWidth:100
                },
                {
                    key:'spec_name',
                    title:'包装规格',
                    minWidth:100
                },
                {
                    key:'price',
                    title:'单价（元）',
                    minWidth:100
                },
                {
                    key:'confirmed_amounts',
                    title:'签收数量',
                    minWidth:100
                },
                {
                    key:' confirmed',
                    title:'签收金额（元）',
                    minWidth:150
                },
                {
                    key:'time',
                    title:'发起时间',
                    minWidth:150
                },
                {
                    key:'status_cn',
                    title:'进度',
                    minWidth:80
                },
                {
                    key:'action',
                    title:'查看',
                    align:'center',
                    minWidth:80,
                    fixed:'right',
                    render:(h,params)=>{
                        //判断是否显示某些操作按钮
                        return h('div',[
                        h('Button',{
                            props:{
                                type:'text',
                                size:'small'
                            },
                            style:{
                                color:'#2D8CF0',
                                display:this.btnp.sjtj_bgypin_xq?'inline-block':'none'
                            },
                            on:{
                                click:()=>{
                                    this.modal_detail=true;
                                    this.gotoDetail(params.row);
                                }
                            }
                        },'详情')    
                        ])
                    }
                }
                
            ],
            data:[]
        };
    },
    methods:{
        init(){
            let that=this;
            util.isCustomer(this);
            let timer;
			if(that.user_type!=='01'){
				timer=setInterval(()=>{
					if(that.$store.state.user.customer.length>0){
						that.customerList=[{name:'全部',uuid:'全部'},...that.$store.state.user.customer];
						clearInterval(timer)	
					}
				},500);
			}else{
				this.searchCustomerChange(this.userUuid);
			}
            // setTimeout(()=>{
            //     if(this.user_type!=='01'){
            //         that.customerList=[{name:'全部',uuid:'全部'},...that.$store.state.user.customer];
            //     }
            // },5000);
            // if(this.user_type=='01'){   
            //     this.newSearchCustomerChange(this.userUuid,'search');
            // } 
            this.getSelectInfo();
        },
        async getSearchInstTree(value){
            this.formItem.inst_uuid='';
            this.formItem.instName='';
            this.s_select_op=[];
			if(value!=='全部'){
				let res=await getOrgTree(value);
				let response=res.data;
				if(response.code===200){
					this.s_tree_data=util.tree([response.data]);
				}else{
					this.$Notice.error({
						title: '获取机构失败',
						desc:response.msg
					});
				}
			}
		},
		s_selectChange(selectarr){
			this.s_select_op=selectarr;
		},
		confirmST(){
			if(this.s_select_op.length>0){
				this.formItem.inst_uuid=this.s_select_op[0].value;
				this.formItem.instName=this.s_select_op[0].title;
			}else{
				this.formItem.inst_uuid='';
				this.formItem.instName='';
			}
		},
        gotoDetail(obj){
            this.detail=[
                {
                    label:'单号',
                    value:obj.code
                },
                {
                    label:'所在地',
                    value:obj.area
                },
                {
                    label:'客户',
                    value:obj.customerName
                },
                {
                    label:'机构',
                    value:obj.instName
                },
                {
                    label:'部门',
                    value:obj.departName
                },
                {
                    label:'领用人',
                    value:obj.leader
                },
                {
                    label:'名称',
                    value:obj.name
                },
                {
                    label:'品牌',
                    value:obj.brand
                },
                {
                    label:'型号',
                    value:obj.type_name
                },
                {
                    label:'供应商',
                    value:obj.supplier_name
                },
                {
                    label:'规格',
                    value:obj.description
                },
                {
                    label:'包装规格',
                    value:obj.spec_name
                },
                {
                    label:'单价（元）',
                    value:accounting.formatMoney(accounting.unformat(obj.price),'',2,',')
                },
                {
                    label:'采购数量',
                    value:obj.amounts
                },
                {
                    label:'采购金额（元）',
                    value:!!obj.total?accounting.formatMoney(accounting.unformat(obj.total),'',2,','):'0.00'
                },
                {
                    label:'签收数量',
                    value:obj.confirmed_amounts
                },
                {
                    label:'签收金额（元）',
                    value:accounting.formatMoney(accounting.unformat(obj.confirmed),'',2,',')
                },
                {
                    label:'发起时间',
                    value:obj.created.slice(0,16)
                },
                {
                    label:'签收时间',
                    value:obj.confirm_date.slice(0,16)
                },
                {
                    label:'进度',
                    value:obj.status_cn
                }
            ]
        },
        async getSelectInfo(){
            let res=await getGoodsCondition();
            if(res.status===200){
                let response=res.data;
                if(response.code===200){
                    this.progressList=[{state:'全部',desc:'全部'},...response.data.statuss];
                }else{
                    this.$Notice.error({
                        title: '请求出错',
                        desc:response.msg
                    });
                }
            }else{
                this.$Notice.error({
                    title: '请求失败'
                });
            } 

        },
        searchCustomerChange(value){
            this.getSearchInstTree(value);
            //this.newSearchCustomerChange(value,'search')
        },
        async newSearchCustomerChange(value,type){
            if(value!=='全部'){
            let res =await getBankOrg(value,'','','')
            if(res.status===200){
                let response=res.data;
                if(response.code===200){
                    if(type==='search'){
                        this.moreMechanismList=[{uuid:'全部',name:'全部'},...response.data]
                    }else if(type==='form'){
                        this.mechanismList=response.data
                    }
                }else{
                    this.$Notice.error({
                        title: '请求出错',
                        desc:response.msg
                    });
                }
            }else{
                this.$Notice.error({
                    title: '请求失败'
                });
            } 
            }else{
                this.formItem.inst='';
            }
        },
        searchGetTable(){
            this.formItem.pageNumber=1;
            this.getTable();
        },
        async getTable(){
            this.loading=true;
            let form=JSON.parse(JSON.stringify(this.formItem));
            for(let key in form){
                if(form[key]==='全部'){
                    form[key]='';
                }
            }
            if(!!this.search.timeRange[0]&&this.search.timeRange.length>0){
                form.startTime=util.time1(this.search.timeRange[0]);
                form.endTime=util.time1(this.search.timeRange[1]);
            }
            if(this.search.location.length>0&&!!this.search.location[0]){
                form.province=this.search.location[0];
                form.city=this.search.location[1];
                form.district=this.search.location[2];
            }  
            let res=await getDataOffTable(form);
            let response=res.data;
            if(response.code===200){
                this.total=response.data.total;
                this.data=response.data.rows.map(item=>{
                    item.time=item.created.slice(0,16);
                    item.price=accounting.formatMoney(accounting.unformat(item.price),'',2,',');
                    item.confirmed=accounting.formatMoney(accounting.unformat(item.confirmed),'',2,',');
                    return item
                })
                this.loading=false;
                this.downLoadUrl=`${url_offypDc}${util.pjArgu(form)}`;
            }else{
                this.$Notice.error({
                    desc:response.msg
                });
                
            }
        },
        pageSizeChange(size){
        //回到第一页
            this.formItem.pageNumber=1;
            this.formItem.pageSize=size;
            this.getTable();
        },
        pageChange(number){
            this.formItem.pageNumber=number;
            this.getTable();
        }
    },
    created(){
        this.init();
        this.btnp=util.bpower(this,this.btn);
        this.getTable();
    }

}

</script>
<style lang='scss' >

</style>